<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // 解决 点击之后 i值是最后一个值的问题 ；
        // 点击li的时候 让自己变颜色 
        // 循环li 绑定事件 ，
        // var lis = document.querySelectorAll("li");
        // for(var i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         // console.log(i);
        //         this.style.background = "red";
        //     }
        // }


        // 解决i值是最后一个的问题 ，通过创建作用域 保存i的值；

        // 第一种 ：通过forEach循环
        // var lis = document.querySelectorAll("li");
        // lis.forEach(function(item,key){
        //     item.onclick = function(){
        //         console.log(key);
        //     }
        // })


        // function fn1(){
        //     var key = 0;
        //     console.log(key);
        // }

        // function fn2(){
        //     var key = 1;
        //     console.log(key);
        // }

        // function fn3(){
        //     var key = 2;
        //     console.log(key);
        // }
        // fn1();
        // fn2();
        // fn3();

        // var key = 0;
        // var key = 1;
        // var key  = 2;
        // var key = 3;
        // console.log(key);

        // 第二种方式 ： 人为创建函数作用域；

        // var lis = document.querySelectorAll("li");
        // for (var i = 0; i < lis.length; i++) {
        //     (function (i) {
        //         lis[i].onclick = function () {
        //             console.log(i);
        //         }
        //     })(i);
        // }


        // 第三种方式 ： 通过 元素对象保存i的值；
        // var lis = document.querySelectorAll("li");
        // for(var i=0;i<lis.length;i++){
        //     // console.dir( lis[i]);
        //     lis[i].key = i;
        //     // console.dir( lis[i]);
        //     lis[i].onclick = function(){
        //         // console.log(i);
        //         // console.dir(this);
        //         console.log(this.key);
        //     }
        // }


        // 第四种方式 ： 通过let 来替代 var 的声明；
        // let 会有 局部作用域 ，是 块级作用域 块级作用域 就是 {};
        // var a = 10;
        // let a = 10;
        // var lis = document.querySelectorAll("li");
        // for(let i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         console.log(i);
        //     }
        // }



        /*  
        总结 ： 解决i值是最后一个的问题
            方式一： forEach 循环替代 for 循环
            方式二： let 来替代 for 循环里的var 声明
            方式三 ： 创建自执行函数 保存i的值
            方式四 ： 通过 元素对象 绑定 i的值；
        
        
        */




    </script>
</body>

</html>